<template>
  <view class="content">
    <view
      class="play_zhe_box"
      :style="{
        'padding-top': height + 'px',
      }"
    >
      <view
        class="play_head"
        :style="{
          top: statusBarHeight + 'px',
        }"
      >
        <view class="play_head_left">
          <u-icon
            name="arrow-left"
            color="#eeeeee"
            size="24"
            :bold="true"
            @click="goBack"
          ></u-icon>
        </view>
        <view class="text">图书林</view>
        <view class="play_head_right">
          <image src="@/static/images/slices/icon_zhunfa.png" mode=""></image>
        </view>
      </view>
      <view class="play_cover" style="margin-top:100rpx" >
        <image src="@/static/images/pic_hxxq_bofangtu.png" mode=""></image>
      </view>
      <!-- <view class="play_text"> 01.这些人，都在努力的活着 </view> -->
      <view class="play_bar">
		  <!-- https://image.yitian369.net/10001/20240113/4a599b4a79e39f6abfb84f658f852156.mp3 -->
		   <com-audio 
		   ref="comAduio"
		   :src="url" 
		   @deleteAudio="deleteAudio"
		   @change="change"
		   :isBtn="false">
		   </com-audio>
        <!-- <progressBar :way="1" :isBtn="false"></progressBar> -->
      </view>
      <view class="play_btn">
       <!-- <view class="btn_left">
          <image src="@/static/images/icon_hxxq_shangyige.png" mode=""></image>
        </view> -->
        <view class="btn_center" @click="play">
          <image v-if="" src="@/static/images/icon_hxxq_bofang.png" v-show="!playFlag" mode=""></image>
		  <image src="@/static/images/icon_hxxq_zanting.png" v-show="playFlag" mode=""></image>
        </view>
       <!-- <view class="btn_right">
          <image src="@/static/images/icon_hxxq_xiayige.png" mode=""></image>
        </view> -->
      </view>
      <!-- <view class="play_head">
			
			</view> -->
    </view>
  </view>
</template>

<script>
import progressBar from "@/pages/components/progress_bar.vue"; //录音
import comAudio from "@/pages/components/audio.vue";
export default {
  data() {
    return {
      height: 0,
      windowHeight: 0,
      statusBarHeight: 0,
      windowHeight_play: 0,
	  playFlag:false,
	  url:''
    };
  },
  components: {
    progressBar,
	comAudio
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    // console.log("statusBarHeightstatusBarHeight", statusBarHeight);
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.windowHeight =
      statusBarHeight.windowHeight - statusBarHeight.statusBarHeight;
    this.windowHeight_play = statusBarHeight.windowHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".play_head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
      //   console.log(this.height, 8888888888);
    });
  },
  onLoad(options) {
  	if (options && options.url) {
		this.url = options.url
	}
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
	change(e) {
		console.log('eeeeeeeee',e);
		this.playFlag = e;
	},
	play() {
		const a = this.$refs.comAduio.playAudio();
	}
  },
};
</script>

<style scoped lang="less">
.content{
  position: fixed;
  box-sizing: border-box;
}
.play_zhe_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  background: url("/static/images/index.png") no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  animation: myfirst 1s;
  z-index: 997;
  .play_head {
    width: 100%;
    padding: 18rpx 0 47rpx;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;

    .play_head_left {
      position: absolute;
      left: 30rpx;
    }
    .play_head_right {
      width: 38rpx;
      height: 38rpx;
      position: absolute;
      right: 30rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }

    .text {
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #eeeeee;
    }
  }
  .play_cover {
    width: 100%;
    padding: 0 83rpx;
    box-sizing: border-box;
    image {
      width: 100%;
      height: 584rpx;
    }
  }
  .play_text {
    margin-top: 48rpx;
    font-size: 34rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #eeeeee;
    text-align: center;
  }
  .play_bar {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    margin-top: 80rpx;
  }
  .play_btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80rpx;
    .btn_left {
      width: 36rpx;
      height: 40rpx;
      margin-right: 96rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .btn_center {
      width: 130rpx;
      height: 130rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .btn_right {
      width: 36rpx;
      height: 40rpx;
      margin-left: 96rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>